<template>
    <div class="content" v-if="data">
        <div class="topContent">
            <div class="left">
                <div class="roleBox">
                    <img :src="data.avatar" alt="">
                </div>
                <div class="roleInfo">
                    <span>{{ data.nickname }}<el-button type="success" plain size="small"
                            style="margin-left: 10px;">{{ data.roleList?.rolename }}</el-button></span>
                    <p>{{ data.relname }}</p>
                </div>
            </div>
            <div class="right">
                <el-button type="primary" style="margin-right: 20px;"
                    @click="goToUserDetail(route.query.uid as string)"><el-icon>
                        <EditPen />
                    </el-icon>编辑员工</el-button>
            </div>
        </div>
        <div class="bottomBox">
            <el-tabs type="card" class="demo-tabs">
                <el-tab-pane label="基本信息">
                    <el-descriptions class="margin-top" :column="3" size="large" border>
                        <template v-for="(item, index) in data">
                            <el-descriptions-item :label="baseTile[index]"
                                v-if="index != 'password' && index != 'avatar'&&index!='roleList'&&index!='id'&&index!='roleid'">{{
                                    item }}</el-descriptions-item>
                        </template>

                    </el-descriptions>
                </el-tab-pane>
                <el-tab-pane label="借阅记录">
                    <el-table :data="borrowList" style="width: 100%" border stripe height="450">
                        <el-table-column prop="borrowid" label="借阅编号" width="180" />
                        <el-table-column prop="bookname" label="书名" width="180" />
                        <el-table-column label="开始时间">
                            <template #default="scope">
                                <span>{{ dateFormate(scope.row.starttime).ymdhms }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="结束时间">
                            <template #default="scope">
                                <span>{{ dateFormate(scope.row.endtime).ymdhms }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column  label="归还时间">
                            <template #default="scope">
                                <span>{{ scope.row.returntime!=null?dateFormate(scope.row.returntime).ymdhms:'' }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="state" label="借阅状态">
                            <template #default="scope">
                                <span v-if="scope.row.state==0" style="color:#409eff ;">归还</span>
                                <span v-if="scope.row.state==1" style="color: #4ee617;">在借</span>
                                <span v-if="scope.row.state==2" style="color: #f64358;">逾期</span>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination background layout="total, sizes, prev, pager, next" :page-sizes="[5, 10, 20, 40]" :total="borrowPage.count"
                style="float: right;margin-top: 20px;" @current-change="borrowPage.jumpPage" @size-change="borrowPage.getlimit" />
                </el-tab-pane>
                <el-tab-pane label="座位预约信息">
                    <el-table :data="willList" style="width: 100%" border stripe height="450">
                        <el-table-column prop="willid" label="预约编号" width="180" />
                        <el-table-column prop="seatid" label="座位名" />
                        <el-table-column label="预约时间">
                            <template #default="scope">
                                <span>{{ dateFormate(scope.row.createdAt).ymdhms }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column  label="时间段">
                            <template #default="scope">
                                <span>{{ scope.row.timeList.starttime}}-{{ scope.row.timeList.endtime}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="state" label="座位状态">
                            <template #default="scope">
                                <span v-if="scope.row.state==0" style="color:#409eff ;">待使用</span>
                                <span v-if="scope.row.state==1" style="color: #4ee617;">使用中</span>
                                <span v-if="scope.row.state==2" style="color: #f64358;">失效</span>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination background layout="total, sizes, prev, pager, next" :page-sizes="[5, 10, 20, 40]" :total="willPage.count"
                style="float: right;margin-top: 20px;" @current-change="willPage.jumpPage" @size-change="willPage.getlimit" />
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
    <div v-else>
        <Loading></Loading>
    </div>
</template>

<script setup lang="ts">

import { computed, onMounted, reactive, ref } from 'vue';
import { reqGetBorrowListByUid, reqGetUserAll, reqGetWillListByUid } from '../../api/common';
import { useRoute, useRouter } from 'vue-router'
import { User} from '../../types/user';
import { BorrowType } from '@/types/borrow';
import dateFormate from '@/utils/dateFormat'
import { WillType } from '@/types/will';
const data = ref<User>()
const borrowList=ref<BorrowType>()
const willList=ref<WillType>()
const route = useRoute()
const router = useRouter()
const borrowPage=reactive<{page:number,num:number,count:number,jumpPage:any,getlimit:any}>({
    count:0,
    page:1,
    num:10,
    jumpPage(page:number){
        borrowPage.page=page
        getBorrrwList()
    },
    getlimit(num:number){
        borrowPage.num=num
        getBorrrwList()
    }
})

const willPage=reactive<{page:number,num:number,count:number,jumpPage:any,getlimit:any}>({
    count:0,
    page:1,
    num:10,
    jumpPage(page:number){
        willPage.page=page
        getWillList()
    },
    getlimit(num:number){
        willPage.num=num
        getWillList()
    }
})


const baseTile: any = { uid:'账号',nickname: '昵称', birth: '生日', relname: '姓名', phonenumber: '手机号', gender: '性别', mail: '邮箱', remark: '描述', pid: '身份证号', state: '状态' }
const getbaseInfo = async () => {
    let res = await reqGetUserAll(route.query.uid as string)
    console.log(res.data.data);
    data.value = res.data.data
    if(data.value)data.value.gender=data.value?.gender=="1"?'男':'女'
}

const getWillList=async()=>{
    let res= await reqGetWillListByUid(route.query.uid as string,willPage.num,willPage.page)
    willList.value=res.data.data.data
    console.log(willList.value);
    
    willPage.count=res.data.data.count
}


const getBorrrwList=async()=>{
    let res= await reqGetBorrowListByUid(route.query.uid as string,borrowPage.num,borrowPage.page)
    borrowList.value=res.data.data.data
    borrowPage.count=res.data.data.count
    
}

const goToUserDetail = (uid: string | null) => {
    router.push({
        path: '/users/userDetail',
        query: {
            uid
        }
    })
}
onMounted(() => {
    getbaseInfo()
    getBorrrwList()
    getWillList()
})
</script>

<style scoped lang="scss">
.content {
    border-radius: 5px;
    overflow: hidden;

    h2 {
        width: 100%;
        background-color: #f9f9f9;
        padding: 20px;
        box-sizing: border-box;
        color: #666666;
        font-weight: bold;
    }

    .topContent {
        box-sizing: border-box;
        padding: 20px;
        background-color: #fff;
        border-radius: 5px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .left {
            display: flex;

            .roleBox {
                width: 80px;
                height: 80px;
                background-color: #ff5656;
                border-radius: 50%;
                overflow: hidden;

                img {
                    width: 100%;
                }
            }

            .roleInfo {
                margin-left: 20px;
                display: flex;
                flex-direction: column;
                justify-content: space-evenly;

                span {
                    color: #666666;
                    font-weight: bold;
                    font-size: 24px;
                }

                p {
                    color: #999999;
                }
            }
        }
    }

    .bottomBox {
        margin-top: 20px;
        width: 100%;
        background-color: #fff;
        box-sizing: border-box;
        border-radius: 5px;
        overflow: hidden;
        padding: 20px;
    }
}
</style>